<template>
  <f7-page class="bg-color-white">
    <f7-navbar :title="title" back-link=" "></f7-navbar>
    <f7-block-title>{{$t('m.gd1')}}</f7-block-title>
    <f7-row no-gap class="game-row">
      <f7-col>
        <p>0</p>
        <h3>USDT</h3>
      </f7-col>
      <f7-col class="border-right">
        <p>0</p>
        <h3>BTL</h3>
      </f7-col>
      <f7-col>
        <p>0</p>
        <h3>BUTK</h3>
      </f7-col>
    </f7-row>

    <div class="radio-box">
      <f7-radio name="demo-radio-inline" class="display-flex align-items-center">USDT</f7-radio>
      <f7-radio name="demo-radio-inline" class="display-flex align-items-center">BTL</f7-radio>
      <f7-radio name="demo-radio-inline" class="display-flex align-items-center">BUTK</f7-radio>
    </div>
    <div class="content-padding">
      <custom-input :placeholder="$t('m.gd2')"></custom-input>
      <custom-input :placeholder="$t('m.gd3')"></custom-input>

      <f7-button fill large color="blue" class="margin-t80">{{$t('m.sure')}}</f7-button>
    </div>
  </f7-page>
</template>

<script>
  export default {
    name: "game-deposit",
    computed: {
      title() {
        return this.$f7route.query.type === '1' ? this.$t('m.gl10') : this.$t('m.gl11');
      }
    }
  }
</script>

<style scoped lang="scss">
  .radio-box {
    display: flex;
    align-items: center;
    padding: $padding;
    .display-flex {
      margin-right: 20px;
      /deep/ .icon-radio {
        margin-right: 10px;
      }
    }
  }
</style>
